<?xml version='1.0' encoding='UTF-8'?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>IPCC - Call Management</title>
        </f:facet>                
        <!--script for play audio with jplayer-->         
        <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
        <link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
        <!--end script-->
        <style type="text/css">
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }
        </style>
        <link type="text/css" rel="stylesheet" href="../../css/main.css" />        
        <style type="text/css">
            .ui-widget{font-size:95% !important;}
            .ui-layout-unit-content{background-color: #E5E5E5;border-width: 0px}      
            .ui-widget{border-width: 0px;color: red}
        </style>
    </h:head>
    <h:body id="bodyForm">
        <div align="center" id="bodyForm">            
            <div style="width: 100%;">
                <p:layoutUnit id="top" position="north" size="auto">
                    <ui:insert name="menu">
                        <ui:include src="../../templates/menu.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>                 

                <p:layoutUnit id="center" position="center" size="400">
                    <h:outputText value="Tra cứu chi tiết cuộc gọi" style="font-size: 30px;margin-left: -150px"/>
                    <h:form id="form">
                        <p:dialog modal="true" widgetVar="statusDialog" header="Đang tìm kiếm.."   
                                  draggable="false" closable="false">  
                            <p:graphicImage value="../../images/ajax-loader.gif" />  
                        </p:dialog>
                        <p:growl id="messages2"/>
                        <p:panelGrid columns="4">
                            Số gọi đến: <p:inputText value="#{callController.soGoi}"/>            
                            Số nhận: <p:inputText value="#{callController.soNhan}"/><br/>
                            Từ ngày: <p:calendar pattern="dd-MM-yyyy" showOn="button" value="#{callController.tuNgay}" />
                            Đến ngày: <p:calendar pattern="dd-MM-yyyy" showOn="button" value="#{callController.denNgay}" />
                        </p:panelGrid>
                        <p:commandButton value="Tìm" action="#{callController.tim()}" update=":form2:table :form" onclick="statusDialog.show();" oncomplete="statusDialog.hide();"/>
                    </h:form>
                    <h:form id="form2">
                        <p:dataTable value="#{callController.lazyModel}" var="c" id="table" paginator="true" rows="20"
                                     rowsPerPageTemplate="20,25,30" lazy="true"
                                     paginatorPosition="bottom">
                            <p:column headerText="Số gọi">
                                <h:outputText value="#{c.soGoi}" style="float: right;"/>
                            </p:column>
                            <p:column headerText="Số nhận">
                                <h:outputText value="#{c.soNhan}" style="float: right;"/>
                            </p:column>
                            <p:column headerText="Trạng thái">
                                <h:outputText value="#{c.trangthai}" style="float: right;"/>
                            </p:column>
                            <p:column headerText="Ngày giờ gọi">
                                <h:outputText value="#{c.ngaygioGoi}" style="float: right;"/>
                            </p:column>
                            <p:column headerText="Kết thúc">
                                <h:outputText value="#{c.thoigianKetthuc}" style="float: right;"/>
                            </p:column>
                            <p:column headerText="Thời lượng">
                                <h:outputText value="#{callController.makeTime(c.thoiluong)}" style="float: right;"/>
                            </p:column>
                            <p:column headerText="Nghe ghi âm">   
                                <div align="center">                                    
                                    <p:commandButton styleClass="ui-icon ui-icon-play" action="#{callController.listen(c.ghiam)}" onclick="dlgListen.show()" update=":formListen" style="width: 20px;height: 20px"/>                                    
                                </div>
                            </p:column>
                        </p:dataTable>                                                
                    </h:form>
                    <!--dialog Listen-->
                    <p:dialog widgetVar="dlgListen" resizable="false" header="Nghe ghi âm" modal="true">
                        <h:form id="formListen">
                            <p:growl/>                                              
                            <script type="text/javascript">
                                $(document).ready(function(){
                                    $("#jquery_jplayer_1").jPlayer({
                                        ready: function () {
                                            $(this).jPlayer("setMedia", {
                                                wav: "#{config.urlMedia}/#{callController.linkAudio}"            
                                            });
                                        },
                                        swfPath: "/js",
                                        supplied: "m4a, oga, wav"
                                    });
                                });
                            </script>
                            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                            <div id="jp_container_1" class="jp-audio">
                                <div class="jp-type-single">
                                    <div class="jp-gui jp-interface">
                                        <ul class="jp-controls">
                                            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                        </ul>
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div class="jp-play-bar"></div>
                                            </div>
                                        </div>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value"></div>
                                        </div>
                                        <div class="jp-time-holder">
                                            <div class="jp-current-time"></div>
                                            <div class="jp-duration"></div>
                                            <ul class="jp-toggles">
                                                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="jp-title">
                                        <ul>
                                            <li>TAM NHAT JSC</li>
                                        </ul>
                                    </div>
                                    <div class="jp-no-solution">
                                        <span>Update Required</span>
                                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                    </div>
                                </div>
                            </div>
                        </h:form>                        
                    </p:dialog>
                </p:layoutUnit>
                <p:layoutUnit id="bottom" position="bottom" size="60">
                    <ui:insert name="footer">
                        <ui:include src="../../templates/footer.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>
            </div>
        </div>
    </h:body>
</html>

